import { useEffect, useState } from "react";
import { Col, Flex, Row, Radio, DatePicker, Button } from 'antd'
import AutoChart from "../../components/AutoChart"
const { RangePicker } = DatePicker;
 import axios from "../../axios";
import React from 'react';
import {Switch, Table} from 'antd';
import ExportJsonExcel from 'js-export-excel';
function Goodscound() {
    const [day, setDay] = useState('lately7');
    const onChange = (e) => {
        setDay(e.target.value)
        getdata(e.target.value);
    };
    const onChangetime = (e) => {//日期
        if (!e) {
            setPlacement("")
            return false
        }
        const startTime = `${e[0].$y}-${(e[0].$M + 1) < 10 ? "0" + (e[0].$M + 1) : (e[0].$M + 1)}-${(e[0].$D) < 10 ? "0" + (e[0].$D) : (e[0].$D)}`;
        const endTime = `${e[1].$y}-${(e[1].$M + 1) < 10 ? "0" + (e[1].$M + 1) : (e[1].$M + 1)}-${(e[1].$D) < 10 ? "0" + (e[1].$D) : (e[1].$D)}`;
        // console.log(`${e[1].$y}-${(e[1].$M+1}-${e[1].$D}`);

        setPlacement(`${startTime},${endTime}`);
        // getStatistics(`${startTime},${endTime}`)
    };
    const [data, setData] = useState({})
    const getdata = async (dateLimit) => {
        let res = await axios.get("/statistics/product/data", {
            params: {
                dateLimit,
                temp: new Date().getTime()
            }
        })
        console.log(res);
        setData(res)
    }

    const option = {
        title: {
            text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads',]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },

        ]
    };


    const columns = [
        {
            title: '商品图',
            dataIndex: 'goodsImg',
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
        },
        {
            title: ' 浏览量',
            dataIndex: 'chinese',
            sorter: {
                compare: (a, b) => a.chinese - b.chinese,
                multiple: 5,
            },
        },
        {
            title: ' 收藏数量',
            dataIndex: 'math',
            sorter: {
                compare: (a, b) => a.math - b.math,
                multiple: 4,
            },
        },
        {
            title: ' 加购件数',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 3,
            },
        },
        {
            title: '销量',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 2,
            },
        },
        {
            title: ' 销售额',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 1,
            },
        },
    ];
    const data2 = [
        {
            key: '1',
            goodsImg: "商品图片",
            goodsName: "名称",
            chinese: 98,
            math: 60,
            english: 70,
        },
    ];
    const onChange2 = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };

    const getTab = async () => {//tab请求
        let res = await axios.get("/statistics/product/ranking", {
            params: {
                dateLimit: "lately30",
                limit: 10,
                page: 1,
                sortKey: "pageviews",
                temp: new Date().getTime(),
            }
        })
        console.log(res);
    }


    //导出
    const data3 = [
        {
            name: "jack",
            age: 18
        },
        {
            name: "小明",
            age: 20
        },
        {
            name: "子豪",
            age: 22
        }
    ]

    const onExprotExcel = () => {
        if (data3 && data3.length > 0) { //data是数组需要导出的数据
            const getRepaymentPlanList = JSON.parse(JSON.stringify(data3))
            const option = []; //option代表的就是excel文件
            option.fileName = "商品统计表"
            const sheetData = getRepaymentPlanList; // 有需要映射的话需要先映射
            const sheetFilter = ["name", "age"];// 
            const sheetHeader = ['日期/时间', '浏览量','新增商品','收藏量','加购件数','下单商品','交易成功','商品数'];//列名
            option.datas = [{
                sheetData,
                sheetName: "个人信息表",
                sheetFilter,
                sheetHeader,
                columnWidth: new Array(sheetHeader.length).fill(20),
            }];
            let toExcel = new ExportJsonExcel(option);  // 生成excel文件
            toExcel.saveExcel();  // 下载excel文件 
        }
    }

    useEffect(() => {
        getdata(day)
        // getTab()
    }, [])

    return (
        <>


            <div className="whitebg">

                <Flex justify="space-between" align="center">
                    <h3>新品概况</h3>
                    <Flex>
                        <Radio.Group
                            value={day}
                            onChange={onChange}
                            style={{
                                marginBottom: 16,
                            }}
                        >
                            <Radio.Button value="yesterday">昨天</Radio.Button>
                            <Radio.Button value="lately7">近七天</Radio.Button>
                            <Radio.Button value="lately30">近30天</Radio.Button>
                        </Radio.Group>
                        <RangePicker onChange={(e) => onChangetime(e)} />

                        <Button onClick={() => searchTime()} type="primary">搜索</Button>
                        <Button type="primary" shape="round" onClick={onExprotExcel}>导出</Button>
                    </Flex>
                </Flex>

                <Row>
                    <Col className="flexitem" xs={24} sm={24} md={6} lg={6} xl={6}>
                        <Flex >
                            <div className="pic">图标</div>
                            <div>
                                新增量

                                <span>
                                    {data.newProductNum}
                                </span>
                                <span>{data.newProductNumRatio}</span>


                            </div>
                        </Flex>
                    </Col>
                    <Col className="flexitem" xs={24} sm={24} md={6} lg={6} xl={6}>
                        <Flex >
                            <div className="pic">图标</div>
                            <div>浏览量
                                <div>
                                    <span> {data.pageView}</span>
                                    <span>{data.pageViewRatio}</span>
                                </div>
                            </div>
                        </Flex>
                    </Col>
                    <Col className="flexitem" xs={24} sm={24} md={6} lg={6} xl={6}>
                        <Flex>
                            <div className="pic">图标</div>
                            <div>收藏量

                                <div>
                                    <span>{data.collectNum} </span>
                                    <span>{data.collectNumRatio}</span>
                                </div>

                            </div>
                        </Flex>

                    </Col>
                    <Col className="flexitem" xs={24} sm={24} md={6} lg={6} xl={6}>
                        <Flex >
                            <div className="pic">图标</div>
                            <div>加购量

                                <div>
                                    <span>{data.addCartNum}  </span>
                                    <span>{data.addCartNumRatio}</span>
                                </div>
                            </div>
                        </Flex>

                    </Col>
                    <Col className="flexitem" xs={24} sm={24} md={6} lg={6} xl={6}>
                        <Flex >
                            <div className="pic">图标</div>
                            <div>交易总件数
                                <div>
                                    <span> {data.orderProductNum} </span>
                                    <span >{data.orderProductNumRatio}</span>
                                </div>
                            </div>
                        </Flex>


                    </Col>
                    <Col className="flexitem" xs={24} sm={24} md={6} lg={6} xl={6}>
                        <Flex >
                            <div className="pic">图标</div>
                            <div>交易成功数
                                <div>
                                    <span>{data.orderSuccessProductNum}</span>
                                    <span>{data.orderSuccessProductNumRatio}</span>
                                </div>
                            </div>
                        </Flex>
                    </Col>
                </Row>

                <section className="whitebg" style={{ height: "400px" }}>
                    用户统计
                    <AutoChart option={option}></AutoChart>
                </section>
            </div>

            <Table columns={columns} dataSource={data2} onChange={onChange2}
                pagination={{
                    defaultCurrent: 3,
                    total: 500,
                    showQuickJumper: true
                }}
            >

            </Table>


            
        </>
    );
}

export default Goodscound;